<template lang="pug">
  .m-dialog( :style="styleObject" v-show="visible")
    .wrap
      .title 数据配置
        .el-icon-close
      .content
        .flow-condition-menu
          i
          | 条件编辑
        .content-item
          el-row
            el-col(:span="3")
              div 符合条件
            el-col(:span="15")
              el-select(v-model="id"  placeholder="请选择")
                el-option(value="全部")
                el-option(value="全部")
        .add
          i.el-icon-circle-plus-outline
          | 添加
        .content-scroll
          .content-item(v-for="list in 2" :key="list")
            el-row(:gutter="10")
              el-col(:span="5" v-for="item in 4" :key="item")
                el-select(v-model="id"  placeholder="请选择")
                  el-option(value="111")
                  el-option(value="111")
              el-col(:span="1")
                .del
                  i.el-icon-delete
        .flow-condition-menu
          i
          | 条件为真
        .content-item
          el-row
            el-col(:span="3")
              div 符合条件
            el-col(:span="15")
              el-select(v-model="id"  placeholder="请选择")
                el-option(value="全部")
                el-option(value="全部")
        .flow-condition-menu
          i
          | 条件为假
        .content-item
          el-row
            el-col(:span="3")
              div 符合条件
            el-col(:span="15")
              el-select(v-model="id"  placeholder="请选择")
                el-option(value="全部")
                el-option(value="全部")
      .footer
        el-button(@click="hide") 取消
        el-button(type="primary"  @click="hide") 确定
</template>
<script>
import popupMixin from '@/mixins/popup'
export default {
  name: 'flowCondition',
  mixins: [popupMixin],
  data () {
    return {
      id: '',
      name: ''
    }
  },
  methods: {
  }
}
</script>

<style lang="stylus" scoped>
.m-dialog
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  background rgba(0,0,0,.5)
  font-size 14px
  color #666
  .wrap
    width: 786px;
    height: 533px;
    background-color: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(1, 12, 32, 0.35);
    border-radius: 3px;
    margin 100px auto 0
    position relative
    .title
      background-color #f0f0f0
      height 40px
      line-height @height
      padding 0 19px
      i
        display block
        float right
        margin-top 16px
        cursor pointer
    .content
      padding 0 20px
      .flow-condition-menu
        font-weight bold
        color #333333
        height 30px
        line-height @height
        border-bottom solid 1px #e8e8e8;
        margin-bottom 12px
        i
          display inline-block
          width 2px
          height 11px
          background-color #333333
      .content-title
        margin-top 10px
        height 30px
        line-height 30px
      .content-item
        margin-bottom 10px
        line-height 30px
      .content-scroll
        max-height 200px
        overflow-x hidden
        overflow-y auto
      .line
        width 15px
        height 1px
        border-top 1px solid #e8e8e8
        margin  14px auto 0
        &.active
          border 0
      .del
        line-height 30px
        cursor pointer
      .add
        color #1f60bd
        cursor pointer
        margin-bottom 5px
      >>>
        .el-input--mini
        .el-input__inner
          height 30px
          line-height 30px
    .footer
      position absolute
      height 66px
      bottom 0
      left 21px
      width 746px
      text-align right
      line-height @height
      border-top 1px dotted  #cccccc

</style>
